<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="tit">
        <span>标题1</span>
        <span>标题2</span>
        <span>标题3</span>
    </div>
    <div id="con">
        <div>新闻</div>
        <div>娱乐</div>
        <div>体育</div>
    </div>
    <script>
        var tit = document.getElementById("tit").children;
        var con = document.getElementById("con").children;
        //闭包方法实现模拟切换
        for (var i = 0; i < tit.length; i++) {
            tit[i].onclick = function (i) {
                return function () {
                    for (var j = 0; j < tit.length; j++) {
                        tit[j].className = "";
                        con[j].className = "";
                    }
                    tit[j].className = "selected";
                    con[j].className = "show";
                }
            }(i)
        }

        // 析答案解析:
        // 1.为每个标签绑定点击事件，立即调用相应函
        // 数，将当前的i值存储下来.
        // 2.构建两层作用域空间，让内部的函数(return
        // 返回值)调用外部作用域的变量，实现变量不能
        // 够被释放
        // 3.在点击时，弹出相应函数中的值，在函数当
        // 中由于没有i的存储空间，会向上一级作用域查
        // 找，然后使用之前存储下来的值
        // 4.关于闭包的基本原理，涉及到的“作用域”函
        // 数返回值”参数”垃圾回收机制”等各种知识
    </script>
</body>

</html>